<template>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <el-form-item label="线索编码">
            <el-input v-model="state.dataForm.leadCode" type="text" clearable placeholder="请输入线索编码"></el-input>
        </el-form-item>
        <el-form-item label="线索联系方式">
            <el-input v-model="state.dataForm.contactInfo" type="text" clearable placeholder="请输入线索联系方式"></el-input>
        </el-form-item>
        <el-form-item label="采购区域">
          <el-input v-model="state.dataForm.purchaseArea" type="text" clearable placeholder="请输入采购区域"></el-input>
        </el-form-item>
        <el-form-item label="咨询时间">
          <el-date-picker type="date" placeholder="开始时间" style="width: 120px" value-format="YYYY-MM-DD"
                          v-model="state.dataForm.startDate"></el-date-picker>
          <span style="margin-top: -14px;margin-left: 10px;margin-right: 10px;">___</span>
          <el-date-picker type="date" placeholder="结束时间" style="width: 120px" value-format="YYYY-MM-DD"
                          v-model="state.dataForm.endDate"></el-date-picker>
        </el-form-item>
        <!-- 查询 -->
        <el-form-item>
            <el-button @click="state.getDataList()"
                style="background: rgba(22, 119, 255, 1);color: #fff;border-radius: 5px;">{{ $t("query") }}</el-button>
        </el-form-item>
        <!-- 重置 -->
        <el-form-item>
            <el-button @click="resetForm"
                style="background: rgba(239, 244, 255, 1);border: 1px solid rgba(16, 98, 202, 1);color: #1062CA;border-radius: 5px;">重置</el-button>
        </el-form-item>
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
            v-loading="state.dataListLoading" :data="state.dataList" border
            @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
            <el-table-column align="center" prop="leadCode" label="线索编号" width="180"> </el-table-column>
            <el-table-column align="center" prop="totalSubmissionCount" label="留资次数" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="purchaseArea" label="采购区域" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="seriesName" label="系列名称" width="220" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="brandName" label="品牌" width="220" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="productName" label="型号名称" width="220" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="quote" label="报价" width="150" show-overflow-tooltip>
              <template v-slot="scope">
                <span v-if="scope.row.quote">{{ formatQuote(scope.row.quote)}}</span>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createAt" label="询价时间" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="" label="操作"  fixed="right" show-overflow-tooltip>
                <template v-slot="scope">
                    <el-button link style="color: #0581FE;" @click="addOrUpdateHandle(scope.row.id)">查看联系方式</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef"></add-or-update>
  <!-- 企业认证弹窗 -->
  <CompanyAuthDialog />
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./consultation-clues-view.vue";
import CompanyAuthDialog from "@/components/CompanyAuthDialog.vue";



const view = reactive({
    getDataListURL: '/noc/consultationlead/pageForUser',
    getDataListIsPage: true,
    deleteURL: "/noc/consultationlead",
    deleteIsBatch: true,
    dataForm: {
        id: "",
        leadCode: "",
        contactInfo: "",
        purchaseArea: "",
        startDate: "",
        endDate: "",
    },
});

const state = reactive({ ...useView(view), ...toRefs(view) });
state.limit = 20;
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
    addKey.value++;
    nextTick(() => {
        addOrUpdateRef.value.init(id);
    });
};
const resetForm = () => {
    view.dataForm.id = "";
    view.dataForm.leadCode = "";
    view.dataForm.contactInfo = "";
    view.dataForm.purchaseArea = "";
    view.dataForm.startDate = "";
    view.dataForm.endDate = "";
    state.getDataList();
};
const formatQuote = (quote: string): string => {
  if (quote === null || quote === undefined || /[\u4e00-\u9fa5]/.test(quote) || quote === '') {
    return '-';
  }
  // 检查是否包含 "-"
  if (quote.includes('-')) {
    // 拆分成两部分
    const [part1, part2] = quote.split('-');
    // 分别格式化两部分
    const formattedPart1 = parseFloat(part1).toFixed(2);
    const formattedPart2 = parseFloat(part2).toFixed(2);
    return `${formattedPart1}-${formattedPart2}`;
  } else {
    // 直接格式化
    return parseFloat(quote).toFixed(2);
  }
}
</script>
<style lang="scss" scoped>
.el-input {
    width: 260px;
    height: 32px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
}

::v-deep .el-table .cell {
    white-space: nowrap;
    font-size: 13px;
    height: 25px;
    line-height: 25px;
}

.form {
    display: flex;
    justify-content: space-between;
}
</style>
